<template>
  <el-dialog :visible.sync="dialogVisible" :before-close="closeHandle" class="dialog" width="840" title="赠送优惠券">
    <div class="container">
      <div class="customers">
        已选择<span v-for="(user, idx) in users" :key="idx">【{{ user.nikeName }}】</span>
      </div>
      <el-button type="primary" plain icon="el-icon-plus" @click="createCouponClick">
        新增优惠券
      </el-button>
      <div class="coupons">
        <coupon v-for="coupon in couponList" :key="coupon.id" @click.native="selectCouponHandle(coupon)"
          :selected.sync="coupon.selected" :setting="coupon" />
      </div>
    </div>
    <create-coupons :visible.sync="innerVisible" @createCoupons="createCouponsHandle" />
    <span slot="footer" class="dialog--footer">
      <el-button @click="closeHandle">取 消</el-button>
      <el-button type="primary" @click="confirmClickHandle">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  PropSync,
  Watch,
  Emit,
} from "vue-property-decorator";
import Coupon from "../Coupon.vue";
import CreateCoupons from "@/views/customer/list/components/dialog/CreateCoupons.vue";
import {
  IGiveCoupon,
  User
} from "../../formModel/CustomerList";
import {
  GiveCoupon
} from "@/views/customer/list/formModel/GiveCoupon";
import {
  giveCoupon
} from "@/api/customer/customer";

  @Component({
    components: {
      Coupon,
      CreateCoupons,
    },
  })
export default class GiveCoupons extends Vue {
    @PropSync("visible", {
      type: Boolean,
      default: false,
    })
    dialogVisible: boolean;

    @Prop({
      type: Array,
      default: () => {
        return [];
      },
    })
    checkedItem;

    innerVisible = false;

    users: User[] = [];

    /** 渲染的优惠券列表 */
    couponList: GiveCoupon[] = [];

    /** 最终赠送的优惠券 */
    get coupons(): IGiveCoupon[] {
      return this.couponList
        .filter(i => {
          return i.selected;
        })
        .map(j => {
          delete j.selected;
          return j;
        });
    }

    @Watch("dialogVisible")
    handleVisibleChange(v) {
      if (v) {
        this.users = this.checkedItem.map(item => {
          return {
            nikeName: item.nikeName,
            userId: item.userId,
          };
        });
        this.couponList = [];
      }
    }

    // 赠送优惠券
    createCouponClick() {
      this.innerVisible = true;
    }

    selectCouponHandle(coupon) {
      coupon.selected = !coupon.selected;
    }


    createCouponsHandle(coupons) {
      console.log("coupons", coupons);
      this.couponList.push(...coupons);
    }

    @Emit("refreshDataList")
    async confirmClickHandle() {
      if (this.coupons.length > 0) {
        console.log("this.users", this.users)
        const ids = this.users.map(user => {
          return user.userId;
        });
        const res = await giveCoupon(ids, this.coupons);
        if (res && res.code === 200) {
          this.$message({
            type: "success",
            message: "赠送优惠券成功！",
          });
          this.dialogVisible = false;
        } else {
          this.$message({
            type: "warning",
            message: "赠送优惠券失败！",
          });
        }
      } else {
        this.$message({
          type: "info",
          message: "请选择优惠券",
        });
      }
    }

    /**
     * 关闭弹窗
     */
    async closeHandle() {
      try {
        const result = await this.confirmHandle();
        if (result === "confirm") {
          this.dialogVisible = false;
        }
      } catch (e) {
        console.log(e);
      }
    }

    async beforeCloseHandle(done) {
      try {
        const result = await this.confirmHandle();
        if (result === "confirm") {
          done();
        }
      } catch (e) {
        console.log(e);
      }
    }

    /**
     * 关闭确认
     */
    async confirmHandle() {
      const result = await this.$confirm(
        "确定退出赠送优惠券页面？退出后，赠送优惠券信息将不保留！",
        "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        },
      );
      return result;
    }
}
</script>

<style scoped lang="scss">
  .container {
    display: block;
    padding: 25px;

    .el-button {
      margin: 30px 0;
    }

    .coupons {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      padding: 0 10px;

      .coupon {
        margin-bottom: 30px;
      }
    }
  }

  .dialog--footer {
    text-align: center;
  }
</style>